<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>
                <input type="checkbox" name="" id="checkAll" />全选/全不选
            </th>
            <th>菜名</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" />
            </td>
            <td>红烧肉</td>
            <td>隆江猪脚饭</td>
            <td>￥200</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" />
            </td>
            <td>香酥排骨</td>
            <td>隆江猪脚饭</td>
            <td>￥998</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" />
            </td>
            <td>北京烤鸭</td>
            <td>隆江猪脚饭</td>
            <td>￥88</td>
        </tr>
    </table>
    <script>
        //需求1:全选/全不选 多选框有一个单击事件,后面三个多选框的checked值跟随他.
        //需求2:下面那三个多选框,都有点击事件:
        //      如果刚好下面三个都是选中的状态,那么上面那个多选框跟着选中.

        //1.获取元素
        let checkAll = document.getElementById('checkAll'); //全选/全不选
        let checks = document.getElementsByName('check');//下面3个多选框

        //2.需求1: 
        checkAll.onclick = function () {
            //获取自己的checked值
            let checkedValue = this.checked;
            console.log(checkedValue);
            //给下面那3个多选框设置checked值,值为checkedValue
            for (let i = 0; i < checks.length; i++) {
                checks[i].checked = checkedValue;
            }
        }

        //3.需求2:
        //遍历下面那3个多选框
        for (let i = 0; i < checks.length; i++) {
            //给下面的3个 每一个多选框设置单击事件. 
            checks[i].onclick = function () {
                //判断这3个多选框是不是都选中了
                //如果都选中,那上面那个多选框跟着选中
                //如果有一个没有选中,那上面那个多选框就不选中

                //假设法: 
                //a.假设这3个都选中了. 
                let flag = true;
                //b.验证,判断每一个的checked值是不是为true
                for (let j = 0; j < checks.length; j++) {
                    if (checks[j].checked == false) {
                        //有一个为false,那就假设失败
                        flag = false;
                        break;
                    }
                }
                //c.如果验证完了,flag的值还是为true, 那就说明上面的假设成立 
                if (flag == true) {
                    checkAll.checked = true;
                } else {
                    checkAll.checked = false;
                }
            }
        }



    </script>
</body>

</html>